<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Animated Wave Background</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
  }
  canvas {
    display: block;
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    border: none;
  }
</style>
</head>
<body>
    <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <circle class="ripple" cx="100" cy="100" r="0" fill="none" stroke="blue" stroke-width="10" />
        <!-- 你可以添加一个点击区域来触发涟漪效果 -->
        <rect x="50" y="50" width="100" height="100" fill="none" stroke="lightgray" stroke-width="2" pointer-events="all" onclick="createRipple()" />
      </svg>
    <!-- <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="70" stroke="blue" stroke-width="20" fill="none" />
      </svg>
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle 
          cx="100" cy="100" r="70" 
          stroke="blue" stroke-width="20" fill="none" 
          stroke-dasharray="219.91" /* 圆的周长 */
          stroke-dashoffset="109.96" /* 圆的周长的一半 */
        />
        <circle 
          cx="100" cy="100" r="70" 
          stroke="red" stroke-width="20" fill="none" 
          stroke-dasharray="219.91 219.91" /* 第一个值是可见长度，第二个值是间隙长度 */
          stroke-dashoffset="0" /* 无偏移量 */
        />
      </svg> -->
<canvas id="waveCanvas"></canvas>

<script>
    function createRipple() {
  // 创建新的涟漪
  const ripple = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  ripple.classList.add('ripple');
  ripple.setAttribute('cx', '100'); // 涟漪中心
  ripple.setAttribute('cy', '100');
  ripple.setAttribute('r', '0'); // 初始半径为0
  ripple.setAttribute('fill', 'none');
  ripple.setAttribute('stroke', 'blue');
  ripple.setAttribute('stroke-width', '10');
  
  // 应用涟漪动画
  ripple.style.animation = 'rippleEffect 1s ease-out forwards';
  
  // 将涟漪添加到SVG中，并在动画结束后移除
  document.querySelector('svg').appendChild(ripple);
  
  setTimeout(() => {
    ripple.remove();
  }, 1000); // 与动画持续时间匹配
}
  const canvas = document.getElementById('waveCanvas');
  const ctx = canvas.getContext('2d');
  
  // 初始化画布大小
  const width = window.innerWidth;
  const height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  
  // 波浪参数
  let phase = 0; // 波浪的相位，用于动画
  const waveCount = 5;
  const amplitude = 50;
  const frequency = 0.02;
  
  // 绘制波浪的函数
  function drawWave() {
    // 清除画布
    ctx.clearRect(0, 0, width, height);
    
    // 绘制波浪
    for (let i = 0; i < waveCount; i++) {
      ctx.beginPath();
      
      // 波浪路径
      for (let x = 0; x < width; x++) {
        const y = amplitude * Math.sin((x * frequency + phase) - i * 0.3) + height / 2;
        if (x === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      
      // 设置颜色和填充
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    
    // 更新相位以创建动画效果
    phase += 0.01;
  }
  
  // 开始绘制波浪动画
  setInterval(drawWave, 16); // 每16毫秒绘制一次，大约每秒60次
  
  // 监听窗口大小变化以更新画布大小
  window.addEventListener('resize', () => {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;
    canvas.width = newWidth;
    canvas.height = newHeight;
  });
</script>
</body>
</html>